<template>
    <div class="FurnaceSootblowing2" :style="popupStyle">
        <div class="title">
            <div class="t_left">
                <img src="@/assets/images/digitalProduction/titleIcon.png" alt="">
                <div class="titleName">第<div class="num">1</div>支路</div>
                <div class="titleName second">第<div class="num">3</div>炮</div>
            </div>
            <div class="t_right">
                <span class="paragraph1">当前状态：</span>
                <div class="circle"></div>
                <span class="paragraph2">点火 <span>0.0 S</span></span>
                <div class="circle"></div>
                <span class="paragraph2">运行</span>
            </div>
        </div>
        <div class="line"></div>
        <div class="content">
            <el-table :data="state.dataDetail" height="25.8vh" style="width :100%;" stripe :scrollbar-always-on="true">
            <el-table-column prop="t1" label="参数" class-name="column_date" align="left" />
            <el-table-column prop="t2" label="前吹灰时间" class-name="column_common" align="left" />
            <el-table-column prop="t3" label="充气时间" align="left" />
            <el-table-column prop="t4" label="点火时间" align="left" />
            <el-table-column prop="t5" label="后吹扫时间" align="left" />
            <el-table-column prop="t6" label="点火跑数" align="left" />
            <el-table-column prop="t7" label="支路选择" align="left" />
          </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { dataTool } from 'echarts';


const props = defineProps({
    top: {
        type: String,
        default: '0px'
    },
    left: {
        type: String,
        default: '0px'
    },
    data: {
        type: Object,
        default: {}
    }
})
let popupStyle = reactive({
    position: 'absolute' as 'absolute',
    top: props.top,
    left: props.left,
})
let state = reactive({
    dataList: [
    ] as any,
    dataName: '',
    dataDetail: [
        {t1: '第1支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第2支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第3支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第4支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第5支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第6支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第7支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
        {t1: '第8支路', t2: '56.3 s', t3: '78.8', t4: '2.0s', t5: '12.3s',t6: '4'},
    ]
})
// state.dataList = props.data.dataList
// state.dataName = props.data.dataName
console.log('popupStyle', popupStyle);

</script>

<style lang="scss" scoped>
.FurnaceSootblowing2 {
    width: vh(607);
    height: vh(356);
    z-index: 999;
    background: rgba(0, 25, 35, 0.7);
    border: vh(1) solid #00B1E1;
    padding-left: vh(13);
    padding-right: vh(14);
    padding-bottom: vh(16);

    .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .t_left {
            display: flex;
            align-items: center;
            img {
                width: vh(12);
                height: vh(11);
                margin-right: vh(7);
            }

            .titleName {
                display: flex;
                align-items: center;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: vh(14);
                color: #FFFFFF;
                line-height: vh(39);

                .num {
                    width: vh(18);
                    height: vh(15);
                    margin: 0 vh(4);
                    text-align: center;
                    line-height: vh(15);
                    color: #00B1E1;
                    background: rgba(0, 177, 225, 0.2);
                }
            }

            .second {
                margin-left: vh(27);
            }

        }
        .t_right {
            display: flex;
            align-items: center;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #FFFFFF;
            .circle {
                width: vh(10);
                height: vh(10);
                background: #00FFA8;
                border-radius: 50%;
            }
            .paragraph1 {
                font-size: vh(14);
            }
            .paragraph2 {
                margin-left: vh(5);
                margin-right: vh(13);
                font-size: vh(12);
            }
        }
    }

    .line {
        width: vh(580);
        height: vh(1);
        border: vh(1) solid #FFFFFF;
        opacity: 0.2;
        margin-bottom: vh(15);
    }

    .detail {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        margin-bottom: vh(8);
        color: #FFFFFF;

        span {
            color: #00D5DD;
        }
    }
}
</style>